<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      text-decoration: none;
    }
    .playContainer {
      position: absolute;
      left: -200px;
      height: 100px;
      width: 800px;
    }
    ul li {
      width: 200px;
      height: 100px;
      display: block;
      float: left;
    }
    .box {
      position: relative;
      left: 600px;
      box-shadow: 0 0 5px black;
      height: 100px;
      width: 200px;
      overflow: hidden;
    }
    .box .arrow {
      position: absolute;
      top: 35%;
      color: pink;
      border-radius: 50%;
      font-size: 15px;
      z-index: 2;
      display: none;
    }
    .box .arrow_left {
      left: 10px;
    }
    .box .arrow_right {
      right: 10px;
    }
    .box:hover .arrow {
      text-align: center;
      height: 20px;
      width: 20px;
      display: block;
    }
    .box .arrow:hover {
      background-color: rgba(0, 0, 0, 0.2);
    }
    .box .buttons {
      font-size: 5px;
      z-index: 1;
      display: block;
      position: absolute;
      width: 80px;
      height: 10px;
      right: 10px;
      bottom: 10px;
    }
  .box .buttons span {
    margin-left: 5px;
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: green;
    text-align: center;
    color:white;
    cursor: pointer;
  }
  .box .buttons span.on{
    background-color: red;
  }
  </style>
</head>
<body>
  <div class="box">
    <ul class="playContainer" style="left:0px;">
      <li style="background-color: #fff;"><img src="#" alt="this is first picture"/></li>
      <li style="background-color: #ff0;"><img src="#" alt="this is second picture"/></li>
      <li style="background-color: #0ff;"><img src="#" alt="this is thrid picture"/></li>
      <li style="background-color: #fff;"><img src="#" alt="this is first picture"/></li>
    </ul>
    <div class="buttons">
      <span class="on">1</span>
      <span>2</span>
      <span>3</span>
    </div>
    <div class="arrow arrow_left">&lt;<a href="javascript:;"></a></div>
    <div class="arrow arrow_right">&gt;<a href="javascript:;"></a></div>
  </div>
</body>
<script>
  var playContainer = document.getElementsByClassName('playContainer')[0];
  var next = document.getElementsByClassName('arrow_right')[0];
  var prev = document.getElementsByClassName('arrow_left')[0];
  var index = 0;
  console.log(playContainer.style);
  next.onclick = function() {
    console.log('right');
    next_pic();
  }

  prev.onclick = function() {
    prev_pic();
  }
  
  function next_pic() {
    var newLeft;
    if(playContainer.style.left === "-600px") {
      newLeft = -200;
    }else {
      newLeft = parseInt(playContainer.style.left)-200;
    }
    playContainer.style.left = newLeft+"px";
    index++;
    if(index > 2) {
      index = 0;
    }
    showCurrentDot();
  }

  function prev_pic() {
    var newLeft;
    if(playContainer.style.left === "0px") {
      newLeft = -400;
    }else {
      newLeft = parseInt(playContainer.style.left)+200;
    }
    playContainer.style.left = newLeft+"px";
    index--;
    if(index < 0) {
      index = 2;
    }
    showCurrentDot();
  }
  var timer = null;
  function autoPlay() {
    timer = setInterval(function() {
      next_pic();
    },3000);
  }
  autoPlay();
  var box = document.getElementsByClassName('box')[0];
  box.onmouseenter = function() {
    clearInterval(timer);
  }
  box.onmouseleave = function() {
    autoPlay();
  }
  var index = 0;
  var dots = document.getElementsByTagName("span");
  function showCurrentDot() {
    for (var i = 0; i<dots.length; i++) {
      dots[i].className = "";
    }
    dots[index].className = "on";
  }
  for (var i = 0, len = dots.length; i < len; i++){
            (function(i){
                dots[i].onclick = function () {
                  // 计算当位置与点选位置差 
                  // 特殊情况index，当前index为 0 时，left = -600
                  var dis = index - i;
                  if(index == 0 && parseInt(playContainer.style.left) == -600){
                    dis = dis + 3;
                  }
                  playContainer.style.left = (parseInt(playContainer.style.left) +  dis * 200)+"px";
                  index = i;
                  showCurrentDot();
                }
            })(i);            
        }
</script>
</html>